<!--
 * @Author: HaiF
 * @Date: 2021-01-04 20:59:56
 * @LastEditTime: 2021-01-17 00:16:17
 * @LastEditors: your name
 * @Description:
 * @FilePath: \adminPC\src\views\icons\icons.vue
 * @可以输入预定的版权声明、个性签名、空行等
-->

<template>
  <div class="wrapper">
    <ul class="icons-list">
      <li v-for="(name,k) in icon" :key="`${k}${name}`" @click="bindClick('el-icon-' + name)">
        <span>
          <i :class="`el-icon-${name}`" />
          <span class="icon-name">{{ 'el-icon-' + name }}</span>
        </span>
      </li>
      <li v-for="(svg,k) in svgs" :key="`${k}${svg}`" @click="bindClick(svg)">
        <span>
          <svg-icon :icon-class="`${svg}`" />
          <span class="icon-name">{{ svg }}</span>
        </span>
      </li>
    </ul>
  </div>
</template>

<script>
import $icons from './icon.json'
import SvgIcon from '@/components/SvgIcon'
export default {
  components: {
    SvgIcon
  },
  props: {},
  data() {
    return {
      icon: $icons,
      svgs: ['dashboard', 'example', 'eye-open', 'eye', 'form', 'link', 'nested', 'password', 'table', 'tree', 'user']
    }
  },
  computed: {},
  watch: {},
  created() {},
  mounted() {},
  methods: {
    bindClick(iconName) {
      this.$emit('click', iconName)
    }
  }
}
</script>
<style lang="scss" scoped>
.wrapper{
   padding: 0px;
   margin: 0px;
   ul.icons-list {
    overflow: hidden;
    list-style: none;
    padding: 0!important;
    border: solid 1px #eaeefb;
    border-radius: 4px;
  }
  .icons-list li {
    float: left;
    width: 16.66%;
    text-align: center;
    height: 120px;
    line-height: 120px;
    color: #666;
    font-size: 13px;
    border-right: 1px solid #eee;
    border-bottom: 1px solid #eee;
    margin-right: -1px;
    margin-bottom: -1px;

    &::after {
      display: inline-block;
      content: "";
      height: 100%;
      vertical-align: middle;
    }

    span {
      display: inline-block;
      line-height: normal;
      vertical-align: middle;
      font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB",
        "Microsoft YaHei", SimSun, sans-serif;
      color: #99a9bf;
      transition: color 0.15s linear;
    }

    svg {
      margin: 0 auto;
    }

    i,svg {
      display: block;
      font-size: 32px;
      margin-bottom: 15px;
      color: #606266;
      transition: color 0.15s linear;
    }

    .icon-name {
      display: inline-block;
      padding: 0 3px;
      height: 1em;
    }

    &:hover {
      span,
      i {
        color: rgb(92, 182, 255);
      }
    }
  }
}
</style>
